<template>
  <div class="home">
    <h2 class="title">🔥vue-vant-mobile🔥</h2>
    <div>
      <img src="@/assets/images/logo.png" width="150" height="150" alt />
    </div>

    <van-row type="flex" justify="center">
      <van-button style="margin: 10px" @click="gotoUser">用户</van-button>
    </van-row>
    <div class="theme">scss全局变量颜色</div>

    <div>{{ count }}</div>
    <div>{{ msg }}</div>
    <div>-----------------------------</div>
    <div>{{ countNum }}</div>
    <van-button @click="addCountNum">增加</van-button>
  </div>
</template>

<script>

import { ref } from 'vue';
import  useCount from '@/composables/useCount'
// import { router } from '@/router'
import { useRouter } from "vue-router"

export default {
  name: 'home',
  setup() {

    const { current: count, inc, dec, set, reset } = useCount(5, {
      min: 1,
      max: 15
    })
    const msg = ref('Demo useCount')

    const countNum = ref(0)
    const addCountNum = () => {
        countNum.value ++
    }
    // 页面跳转
    const router = useRouter()
    let gotoUser = function () {
      router.push({
        path: '/user',
        query: {
          id: 123,
          name: 'nick'
        }
      })
    }

    return {
      count,
      inc,
      dec,
      set,
      reset,
      msg,
      countNum,
      addCountNum,
      gotoUser
    }
  },
  data() {
    return {
      fileList: [],
      value: 50
    };
  },
  methods: {
    /* gotoUser() {
      router.push({
        path: '/user',
        query: {
          id: '123',
          name: 'nick'
        }
      })
    }, */
  }
};
</script>
<style lang="scss" scoped>
.home {
  line-height: 80px;
  text-align: center;
  padding: 5px 10px;
}
.logo {
  width: 200px;
  height: 200px;
}
.theme {
  text-align: center;
  color: $common-color;
  margin: 10px 0px;
}
.title {
  font-size: 50px;
  text-align: center;
}
</style>
